.daily-attendance-box{
  background-color: var(--z-bg-def);
}
.daily-attendance{
  display: flex;
  justify-content: space-around;
  margin-top: var(--rem-20);
  .daily-attendance__main{
    width: 58%;
    padding: var(--rem-20);
    background-color: var(--z-bg-def);
    border-radius: var(--rem-20);
    ul{
      display: grid;
      border-radius: var(--rem-24);
      grid-template-columns: repeat(5,1fr);
      grid-template-rows: repeat(6,1fr);
      grid-column-gap: var(--rem-5);
      grid-row-gap: var(--rem-10);
      margin-top: var(--rem-10);
      li{
        height: var(--rem-94);
        background: var(--bg-check-item-h5);
        padding: var(--rem-8) var(--rem-16);
        border-radius: var(--rem-10);
        &.sign-receive-not{
          background: #0078ff;
          color: #fff;
          cursor: pointer;
        }
        &.sign-receive{
          background: var(--bg-checked-item-h5);
        }
        h5{
          font-size: var(--rem-10);
        }
        img{
          margin: var(--rem-2) auto var(--rem-5) ;
        }
        h3{
          font-size: var(--rem-15);
          font-weight: 700;
          text-align: center;
        }
      }
    }
  }
  .daily-attendance__info{
    width: 36%;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    .daily-attendance__condition{
      width: 100%;
      padding: var(--rem-15);
      background: var(--bg-card-active);
      border-radius: var(--rem-10);
      border: 2px solid var(--border-act);
      box-sizing: border-box;
      padding: var(--rem-20);
      em{
        font-style: normal;
      }
      h3{
        font-size: var(--rem-16);
        color: var(--z-font-anti);
      }
      h4{
        font-size: var(--rem-20);
        font-weight: 500;
        display: flex;
        align-items: center;
        span{
          margin-left: auto;
          border-radius: var(--rem-30);
          padding: var(--rem-10) var(--rem-20);
          background-color: var(--z-font-def);
          color: hsla(0,0%,100%,.6);
        }
      }
    }
    .daily-attendance__record{
      width: 100%;
      box-sizing: border-box;
      padding: var(--rem-30);
      background-color: var(--z-bg-def);
      border-radius: var(--rem-20);
      li{
        display: flex;
        margin-bottom: var(--rem-50);
        .daily-attendance__record-title{
          position: relative;
          width: 100%;
          .daily-attendance__record-bar{
            position: absolute;
            left: 0;
            right: 0;
            bottom: var(--rem-8-n);
            height: var(--rem-8);
            background-color: #409eff;
            border-radius: var(--rem-8);
            &.active{
              background-color: var(--z-border-def);
            }
          }
        }
        .daily-attendance__record-img{
          position: relative;
          width: var(--rem-50);
          display: flex;
          justify-content: center;
          margin-left: var(--rem-20);
          transform: translateY(var(--rem-10));
          cursor: pointer;
          span{
            background-color: var(--z-bg-act);
            padding: var(--rem-3) var(--rem-7);
            border-radius: var(--rem-4);
            position: absolute;
            top: var(--rem-25);
            color: #fff;
          }
        }
      }
    }
    .daily-attendance__tips{
      width: 100%;
      font-size: var(--rem-14);
      h5{
        font-weight: 600;
      }
      h6{
        font-weight: 500;
      }
    }
  }
}
.check-headert-container{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--rem-20) var(--rem-20) 0;
  .check-headertr-container{
    display: flex;
    padding: var(--rem-8) var(--rem-11);
    color: var(--z-font-white);
    border-radius: var(--rem-20);
    line-height: 1;
    align-items: center;
    background: #0078ff;
    img{
      width: var(--rem-20);
      height: var(--rem-20);
      margin-right: var(--rem-5);
    }
    .check-headertrc-right-desc{
      font-size: var(--rem-13);
      color: hsla(0,0%,100%,.6);
    }
    .check-fg {
      display: inline-block;
      color: hsla(0, 0%, 100%, .6);
      padding: 0 var(--rem-3) 0 var(--rem-5);
    }
    .check-headertrc-left-desc{
      font-weight: 700;
      font-size: 28rem;
      color: var(--z-font-white);
    }
  }
  .check-headertl-container{
    span{
      display: block;
      &.check-headertl-title{
        font-weight: 700;
        font-size: var(--rem-18);
        color: var(--z-font-anti);
      }
      &.check-headertl-desc{
        margin-top: var(--rem-7);
        text-align: left;
        font-weight: 500;
        font-size: var(--rem-14);
        color: var(--z-font-anti);
        opacity: 0.6;
      }
    }
  }
}
.sign-zscoll{
  margin: var(--rem-10) 0 0;
}
.sign-active-tab{
  min-width: 92rem;
  padding: 25rem 20rem;
  border-radius: 35rem;
  line-height: 16rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #3896ff;
  border: 1px solid var(--border-prm);
  color: var(--z-font-white) !important;
  box-sizing: border-box;
}
.pc-sign-p{
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--rem-30);
  padding: 0;
  line-height: 1;
  background-color: var(--z-font-def);
  i{
    font-style: normal;
    &.pc-sign-i1{
      font-size: var(--rem-20);
      color: hsla(0,0%,100%,.6);
    }
    &.pc-sign-i2{
      color: hsla(0,0%,100%,.6);
      padding: 0 var(--rem-5) 0 var(--rem-10);
    }
    &.pc-sign-i3{
      color: var(--z-font-anti);
    }
  }
}
.information-content-h5__title{
  height: var(--rem-60);
  display: flex;
  align-items: center;
  border-bottom: 2px solid var(--border-color);
  padding: 0 var(--rem-12);
  h3{
    display: flex;
    align-items: center;
    font-size: var(--rem-15);
    font-weight: 700;
    color: var(--z-font-anti);
    svg{
      margin-right: var(--rem-10);
    }
  }
  h4{
    display: flex;
    align-items: center;
    margin-left: auto;
    svg{
      margin-right: var(--rem-5);
    }
  }
}
.activityImg{
  padding: var(--rem-40) 0;
  img{
    max-width: var(--rem-370);
    max-height: var(--rem-180);
    margin: 0 auto 0;
  }
}
.activityInfo{
  padding: 0 var(--rem-20);
  .titleName{
    font-weight: 600;
    font-size: var(--rem-17);
  }
  .content-style{
    line-height: 25rem;
    color: var(--z-font-anti);
  }
  .contentInfo{
    margin-top: var(--rem-20);
  }
}
